<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!doctype html>
<head>
  <title>jQuery Resizable Columns</title>
  <meta name="description" content="">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="dist/jquery.resizableColumns.css">
  <link rel="stylesheet" href="demo/demo.css">
</head>
<body>
  <a href="http://github.com/dobtco/jquery-resizable-columns">
    <img class="ribbon" src="http://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub">
  </a>

  <div class="container">
    <div class="page-header">
    	<h1>
    		jQuery Resizable Columns
    		<small>Demo</small>
    	</h1>
	</div>

    <blockquote><em>Grab the column borders and drag 'em! <strong>Bonus: refresh the page.</strong></em></blockquote>

    <table class="table table-bordered" data-resizable-columns-id="demo-table-v2">
      <thead>
        <tr>
          <th data-resizable-column-id="#">#</th>
          <th data-resizable-column-id="first_name">First Name</th>
          <th data-resizable-column-id="last_name">Last Name</th>
          <th data-resizable-column-id="username" id="username-column" data-noresize>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td colspan="2">Larry the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>

    <pre>
&lt;script src="/path/to/jquery.js"&gt;&lt;/script&gt;
&lt;script src="/path/to/store.js"&gt;&lt;/script&gt;
&lt;script src="/path/to/jquery.resizableColumns.js"&gt;&lt;/script&gt;

&lt;table class="table table-bordered" data-resizable-columns-id="demo-table"&gt;
&lt;thead&gt;
  &lt;tr&gt;
    &lt;th data-resizable-column-id="#"&gt;#&lt;/th&gt;
    &lt;th data-resizable-column-id="first_name"&gt;First Name&lt;/th&gt;
    &lt;th data-resizable-column-id="last_name"&gt;Last Name&lt;/th&gt;
    &lt;th data-resizable-column-id="username" data-noresize&gt;Username&lt;/th&gt;
  &lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
  ...
&lt;/tbody&gt;
&lt;/table&gt;

&lt;script&gt;
$(function(){
  $("table").resizableColumns({
    store: window.store
  });
});
&lt;/script&gt;</pre>
  </div>

  <!-- jQuery -->
  <script src="jquery.js"></script>
 
  <script src="jquery.resizableColumns.min.js"></script>
  <script>
    $(function(){
      $("table").resizableColumns({
        store: window.store
      });
    });
  </script>

  <!-- Analytics -->
  <script type="text/javascript"> 
  </script>
</body>
</html>
